<template>
  <div class="forgot-password-container">
    <a-card class="forgot-password-card">
      <h2>找回密码</h2>
      <a-form :model="form" @finish="handleSubmit">
        <a-form-item>
          <a-input v-model:value="form.username" placeholder="学号/工号">
            <template #prefix>
              <user-outlined />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-radio-group v-model:value="form.role" class="role-select">
            <a-radio-button value="student">学生</a-radio-button>
            <a-radio-button value="teacher">教师</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="form.email" placeholder="注册时的邮箱">
            <template #prefix>
              <mail-outlined />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <div class="verify-code">
            <a-input v-model:value="form.verifyCode" placeholder="验证码">
              <template #prefix>
                <safety-outlined />
              </template>
            </a-input>
            <a-button 
              :disabled="!!countdown || !form.email" 
              @click="handleSendCode"
              :loading="sending"
            >
              {{ countdown ? `${countdown}s后重试` : '获取验证码' }}
            </a-button>
          </div>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block :loading="loading">重置密码</a-button>
        </a-form-item>
        <div class="footer-links">
          <a @click="handleBackToLogin">返回登录</a>
          <a @click="handleRegister">立即注册</a>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { UserOutlined, MailOutlined, SafetyOutlined } from '@ant-design/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'

export default {
  name: 'ForgotPassword',
  components: {
    UserOutlined,
    MailOutlined,
    SafetyOutlined
  },
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const sending = ref(false)
    const countdown = ref(0)
    const form = reactive({
      username: '',
      role: 'student',
      email: '',
      verifyCode: ''
    })

    const handleSendCode = async () => {
      if (!form.email) {
        message.error('请输入邮箱')
        return
      }

      sending.value = true
      try {
        // 模拟发送验证码
        await new Promise(resolve => setTimeout(resolve, 1000))
        message.success('验证码已发送')
        countdown.value = 60
        const timer = setInterval(() => {
          countdown.value--
          if (countdown.value <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      } catch (error) {
        message.error('发送验证码失败')
      } finally {
        sending.value = false
      }
    }

    const handleSubmit = async () => {
      if (!form.username || !form.email || !form.verifyCode) {
        message.error('请填写完整信息')
        return
      }

      loading.value = true
      try {
        // 模拟重置密码
        await new Promise(resolve => setTimeout(resolve, 1000))
        message.success('密码重置邮件已发送，请查收')
        router.push({ name: 'login' })
      } catch (error) {
        message.error('重置密码失败')
      } finally {
        loading.value = false
      }
    }

    const handleBackToLogin = () => {
      console.log('返回登录页')
      router.push({ name: 'login' })
    }

    const handleRegister = () => {
      console.log('跳转到注册页')
      router.push({ name: 'register' })
    }

    return {
      form,
      loading,
      sending,
      countdown,
      handleSubmit,
      handleSendCode,
      handleBackToLogin,
      handleRegister
    }
  }
}
</script>

<style scoped>
.forgot-password-container {
  height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: url('../assets/login-bg.jpg') no-repeat center center;
  background-size: cover;
  padding-right: 120px;
}

.forgot-password-card {
  width: 320px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  border: none !important;
}

h2 {
  margin-bottom: 24px;
  color: rgba(0, 0, 0, 0.85);
}

.role-select {
  width: 100%;
  display: flex;
}

.role-select :deep(.ant-radio-button-wrapper) {
  flex: 1;
  text-align: center;
}

.verify-code {
  display: flex;
  gap: 8px;
}

.verify-code .ant-input-affix-wrapper {
  flex: 1;
}

.verify-code .ant-btn {
  width: 120px;
  padding: 0 8px;
}

.footer-links {
  margin-top: 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-links a {
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.footer-links a:hover {
  color: #1890ff;
}
</style>
